<template>
  <div>
    <div class="fenlei-detail" v-if="fenleiDetail && fenleiDetail.titleData && !loadingFlag">
      <div class="top-title">
        <span class="title">分类详情</span>
        <span class="i-wrapper" @click.stop="goBack">
          <i class="iconfont icon-arrow-left"></i>
        </span>
      </div>
      <div class="brand-background" :style="brandImg">
        <div class="brand-card-content border">
          <span class="brand-logo" :style="brandLogo"></span>
          <span class="brand-title-info">
            <div class="title">
              <span>{{fenleiDetail.titleData.brandName}}</span>
              <span class="label-fenlei">分类</span>
            </div>
            <div class="price">
              <span class="label-gz">关注</span>
              <span class="cls-attention">{{fenleiDetail.titleData.attentionNum}}人关注</span>
            </div>
          </span>
        </div>
      </div>
      <scroll class="tags" :scrollX="tagsScrollX" :scrollY="tagsScrollY" :preventDefault="tagsPreventDefault" :data="categoryTags" >
        <div class="tag-wrapper">
          <div class="tag" v-for="(item, index) in categoryTags" :key="index">
            <a target="_blank" :href="item.href">
              <span>{{item.tagName}}</span>
            </a>
          </div>
        </div>
      </scroll>
      <page-splite v-show="this.fenleiDetail && this.fenleiDetail.starProducts"><span class="cls-split" >明星单品</span></page-splite>
      <scroll class="star-products" :scrollX="tagsScrollX" :scrollY="tagsScrollY" :preventDefault="tagsPreventDefault" :data="starProducts">
        <div class="star-product-wrapper">
          <a v-for="(item, index) in starProducts" :key="index" target="_blank" :href="item.href">
            <div class="star-product">
              <div class="img-wrapper">
                <img class="product-img" width="120" height="120" :src="getImgSrc(item.imgSrc)">
              </div>
              <div class="ellipse">{{item.title}}</div>
              <div class="price">{{item.price}}</div>
            </div>
          </a>
        </div>
      </scroll>
      <page-splite v-show="this.fenleiDetail && this.fenleiDetail.hotBrands"><span class="cls-split">热门品牌</span></page-splite>
      <scroll class="hot-brands" :scrollX="tagsScrollX" :scrollY="tagsScrollY" :preventDefault="tagsPreventDefault" :data="hotBrands">
        <div class="hot-brand-wrapper">
          <a v-for="(item, index) in hotBrands" :key="index" target="_blank" :href="item.href">
            <div class="hot-brand">
              <div class="img-wrapper">
                <img class="product-img" width="120" height="120" :src="getImgSrc(item.imgSrc)">
              </div>
              <div class="ellipse">{{item.title}}</div>
              <div class="price">{{item.price}}</div>
            </div>
          </a>
        </div>
      </scroll>
      <page-splite v-show="this.fenleiDetail && this.fenleiDetail.youhuiList"><span class="cls-split">近期优惠</span></page-splite>
      <article-list :showLabelTitle="showLabelTitle" :articles="youhuiList" @selectItem="selectItem"></article-list>
      <a target="_blank" href="https://m.smzdm.com/app/android.html?is_detail=1">
        <div class="arrive-full-button">打开APP，查看更多好价</div>
      </a>
    </div>
    <div class="fullscreen-loading-wrapper" v-show="loadingFlag">
      <div class="fullscreen-loading-inner">
        <div class="fs-loading">
          <fullscreen-loading></fullscreen-loading>
        </div>
      </div>
    </div>
    <div class="nothing" v-show="!fenleiDetail || !fenleiDetail.titleData" ><span>未检索到任何数据</span></div>
  </div>
</template>

<script type="text/ecmascript-6">
// import fenleiDetail from '@/config/fenleiDetail'
import { getImgSrc } from 'common/js/tools'
import Scroll from 'base/scroll/scroll'
import PageSplite from 'base/page-splite/page-splite'
import ArticleList from 'components/article-list/article-list'
import { mapGetters } from 'vuex'
import { getFenleiDetail } from 'api/fenleiDetail'
import FullscreenLoading from 'base/fullscreen-loading/fullscreen-loading'
import { routeGoodsDetailMixn } from 'common/js/mixin'

export default {
  name: 'fenlei-detail-page',
  mixins: [ routeGoodsDetailMixn ],
  components: { Scroll, PageSplite, ArticleList, FullscreenLoading },
  data () {
    return {
      fenleiDetail: {},
      tagsScrollX: true,
      tagsScrollY: false,
      tagsPreventDefault: false,
      showLabelTitle: false,
      loadingFlag: false
    }
  },
  computed: {
    youhuiList () {
      if (!(this.fenleiDetail && this.fenleiDetail.titleData)) return []
      return this.fenleiDetail.youhuiList
    },
    starProducts () {
      if (!(this.fenleiDetail && this.fenleiDetail.titleData)) return []
      return this.fenleiDetail.starProducts
    },
    hotBrands () {
      if (!(this.fenleiDetail && this.fenleiDetail.titleData)) return []
      return this.fenleiDetail.hotBrands
    },
    categoryTags () {
      if (!(this.fenleiDetail && this.fenleiDetail.titleData)) return []
      return this.fenleiDetail.categoryTags
    },
    brandLogo () {
      if (!(this.fenleiDetail && this.fenleiDetail.titleData)) return ''
      return {
        backgroundImage: 'url(' + getImgSrc(this.fenleiDetail.titleData.brandLogo) + ')',
        backgroundSize: 'cover'
      }
    },
    brandImg () {
      if (!(this.fenleiDetail && this.fenleiDetail.titleData)) return ''
      return {
        backgroundImage: 'url(' + getImgSrc(this.fenleiDetail.titleData.brandImg) + ')',
        backgroundSize: 'cover'
      }
    },
    ...mapGetters({
      fenleiDetailUrl: 'fenleiDetailUrl'
    })
  },
  methods: {
    selectItem (article) {
      this.routeToGoodsDetailPage(article)
    },
    getImgSrc (psrc) {
      return getImgSrc(psrc)
    },
    goBack () {
      this.$router.back()
    },
    loadData () {
      if (!this.fenleiDetailUrl) return
      this.loadingFlag = true
      getFenleiDetail(this.fenleiDetailUrl).then((resp) => {
        if (resp.message === 1) {
          this.fenleiDetail = resp.data
        }
        this.loadingFlag = false
      }).catch((e) => {
        console.log(e)
        this.loadingFlag = false
      })
    }
  },
  activated () {
    if (!(this.fenleiDetailUrl)) {
      this.$router.push('/homepage')
    }
    this.$store.commit('SET_TABS_STATE', false)
    this.$store.commit('SET_SEARCH_TITLE', false)
  },
  created () {
    this.loadData()
  },
  watch: {
    fenleiDetailUrl (newVal, oldVal) {
      if (newVal !== oldVal) {
        this.loadData()
      }
    }
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '~common/stylus/mixin'

.fenlei-detail
  background: #EEEEEE
  padding-bottom: 20px
  .top-title
    font-size: 16px
    text-align: center
    background: #fff
    position: fixed
    left: 0px
    top: 0px
    width: 100%
    z-index: 2
    .title
      font-size: 16px
      font-weight: 900
      line-height: 40px
      color: #353535
    .i-wrapper
      position: absolute
      top: 0
      left: 0px
      line-height: 40px
      padding: 0px 15px
  .brand-background
    margin-top: 40px
    height: 200px
    position: relative
    .brand-card-content
      position: absolute
      display: flex
      top: 93px
      left: 4%
      right: 4%
      background: #fff
      box-shadow: 0px 2px 4px #888888
      padding: 15px
      .brand-logo
        flex: 0 0 85px
        width: 85px
        height: 85px
      .brand-title-info
        font-size: 12px
        flex: 1
        display: flex
        flex-wrap: wrap
        align-content: space-between
        padding: 5px 0 5px 20px
        .title
          flex: 0 0 100%
          line-height: 24px
          font-size: 18px
          font-weight: 500
          color: #333333
          .label-fenlei
            border: 1px solid #999999
            border-radius: 2px
            font-size: 10px
            vertical-align: bottom
            padding: 2px 6px
            margin-left: 10px
            color: gray
        .price
          flex: 0 0 100%
          line-height: 20px
          font-size: 14px
          color: #999999
          .label-gz
            background: #F04848
            vertical-align: bottom
            border-radius: 20px
            font-size: 12px
            padding: 5px 15px
            color: #fff
          .cls-attention
            vertical-align: bottom
            margin-left: 6px
  .tags
    margin: 26px 10px 0px 10px
    .tag-wrapper
      white-space: nowrap
      display: inline-block
      .tag
        display: inline-block
        margin-right: 10px
        border-radius: 2px
        background: #fff
        a
          cursor: pointer
          span
            display: inline-block
            color: black
            font-weight: 300
            padding: 6px 12px
  .cls-split
    font-size: 14px
    line-height: 24px
    font-weight: 700
    padding-left: 15px
  .star-products
    margin-left: 10px
    .star-product-wrapper
      display: inline-block
      white-space: nowrap
      .star-product
        display: inline-block
        margin-right: 6px
        padding: 10px
        width: 120px
        height: 190px
        background: #fff
        position: relative
        .img-wrapper
          text-align: center
        .ellipse
          font-weight: 600
          color: 10px
          height: 44px
          overflow: hidden
          white-space: normal
          font-size: 14px
          line-height: 22px
        .price
          position: absolute
          left: 10px
          bottom: 10px
          color: #F36666
          no-wrap()
  .hot-brands
    margin-left: 10px
    .hot-brand-wrapper
      display: inline-block
      white-space: nowrap
      .hot-brand
        display: inline-block
        margin-right: 6px
        padding: 10px
        width: 120px
        height: 160px
        background: #fff
        position: relative
        .img-wrapper
          text-align: center
  .arrive-full-button
    text-align:center
    padding: 8px
    margin: 20px 8px 8px 8px
    font-size: 16px
    line-height: 16px
    background: #F04848
    color: #fff
    border-radius: 2px
    margin-bottom: 16px

.fullscreen-loading-wrapper
  z-index: 10
  position: fixed
  left: 0
  top: 0
  right: 0
  bottom: 0
  background: #FFFFFE
  .fullscreen-loading-inner
    position: relative
    width: 100%
    height: 100%
    .fs-loading
      position: absolute
      width: 100%
      top: 50%
      text-align: center
      transform: translateY(-50%)

.nothing
  padding: 20px
  text-align: center
  color: black
  font-size: 20px
</style>
